<template>
	<view class="wrap u-flex-col">
		<u-navbar
			title-color="#fff"
			back-icon-color="#fff"
			z-index="9999"
			:is-fixed="isFixed"
			:is-back="isBack"
			:background="background"
			:back-text-style="{ color: '#fff' }"
			:title="title"
			:custom-back="pageBack"
			:back-icon-name="backIconName"
		>
			<view class="navbar-right u-flex" slot="right">
				<view class="message-box right-item" @click.stop="openPage('/pages/workbench/collect/add')">
					<u-icon name="plus" size="38" color="#fff" style="margin-right:30rpx;"></u-icon>
				</view>
				<view class="message-box right-item" @click="showSearch = true"><u-icon name="search" size="38" color="#fff" style="margin-right:30rpx;"></u-icon></view>
			</view>
		</u-navbar>
		<view class="list u-flex u-flex-wrap">
			<view class="item" @click.stop="openPage('/pages/workbench/collect/add')">
				<view class="itemBox">
					<image src="@/static/images/car1.jpeg" mode="widthFix"></image>
					<view class="info">
					消防训练
					</view>
				</view>
			</view>
			<view class="item" @click.stop="openPage('/pages/workbench/collect/add')">
				<view class="itemBox">
					<image src="@/static/images/car1.jpeg" mode="widthFix"></image>
					<view class="info">
					理论学习
					</view>
				</view>
			</view>
			<view class="item" @click.stop="openPage('/pages/workbench/collect/add')">
				<view class="itemBox">
					<image src="@/static/images/car1.jpeg" mode="widthFix"></image>
					<view class="info">
					政治教育
					</view>
				</view>
			</view>
			<view class="item" @click.stop="openPage('/pages/workbench/collect/add')">
				<view class="itemBox">
					<image src="@/static/images/car1.jpeg" mode="widthFix"></image>
					<view class="info">
					高楼演练
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showSearch" mode="right" width="80%">
			<view class="myform">
				<view class="formItem">
					<view class="label">素材类型</view>
					<u-input
						:border="border"
						type="select"
						:select-open="actionCarTypeShow"
						v-model="model.carType"
						placeholder="请选择登记类型"
						@click="actionCarTypeShow = true"
					></u-input>
				</view>
				<view class="formItem">
					<view class="label">素材名称</view>
					<u-input
						:border="border"
						type="text"
						v-model="model.carType"
						placeholder="请输入素材名称"
					></u-input>
				</view>
				<view class="formItem">
					<view class="label">素材收集时间</view>
					<u-input :border="border" type="picker" v-model="model.buyTime" placeholder="请选择素材收集时间" @click="buyTimeShow = true"></u-input>
				</view>
				
				<view class="u-m-t-40"><u-button type="primary" @click="showSearch = false">搜索</u-button></view>
			</view>
		</u-popup>
		<u-action-sheet :list="carTypeList" v-model="actionCarTypeShow" @click="carTypeChoose"></u-action-sheet>
		<u-picker mode="time" v-model="buyTimeShow" :params="params" @confirm="buyTimerConfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			border: true,
			swiperCurrent:0,
			current:0,
			list: [
				{
					name: '全部'
				},
				{
					name: '待维护'
				},
				{
					name: '已完成'
				}
			],
			model: {
				carType: '',
				carName: '',
				buyTime: '',
				carAge: ''
			},
			actionCarTypeShow: false,
			carTypeList: [{text:'日常训练'},{text:'政治教育'}],
			buyTimeShow: false,
			title: '素材收集',
			background: { backgroundColor: '#0251b6' },
			backIconName: 'nav-back',
			right: false,
			isBack: true,
			isFixed: true,
			name: '',
			myDate: '',
			params: {
				year: true,
				month: true,
				day: true
			},
			showSearch: false
		};
	},
	methods: {
		//页面跳转
		openPage(url) {
			this.$u.route({
				url: url
			});
		},
		pageBack() {
			uni.navigateBack({
				delta: 1
			});
			// javascript:history.back();
		},
		carTypeChoose() {},
		buyTimerConfirm() {},
		timerConfirm() {},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
			// this.getOrderList(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	background-color: rgb(240, 242, 244);
	.swiper-box {
		.title {
			padding: 20rpx 0;
		}
		.swiper-item {
			// padding: 0 20rpx;
		}
	}
}
.myform {
	padding: 20rpx;
	.formItem {
		margin-bottom: 20rpx;
		.label {
			margin-bottom: 10rpx;
		}
	}
}
.list {
	overflow: hidden;
	padding:10rpx;
	flex-basis: center;
	.item {
		width: 50%;
		padding:10rpx;
		.itemBox{
			background: #fff;
			border-radius: 0.3em;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
			padding: 10rpx;
			image {
				width: 100%;
				height:100%;
			}
			.info{
				text-align: center;
				font-size:20rpx;
				color:#666;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		
		.pic {
			width: 100%;
			height:calc(100vw/5 - 20rpx);
			
		}
		
	}
	.nodata{
		position: fixed;
		top:40%;
		left:50%;
		text-align: center;
		font-size:26rpx;
		transform: translateX(-50%);
		.iconfont{
			font-size:60rpx;
			margin-bottom: 40rpx;
			color:#2979FF;
		}
		.text{
			color:#999;
			font-size:30rpx;
		}
		
		
	}
}
</style>
